<!DOCTYPE html>
<!-- saved from url=(0062)http://www.17sucai.com/preview/1324218/2018-07-31/ks/kiss.html -->
<html class="hb-loaded"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<title>酸奶官方网站</title>
<meta name="keywords" content="">
<meta name="Description" content="">


<link rel="stylesheet" type="text/css" href="./魅力_files/bootstrap.min.css">
<link rel="stylesheet" href="./魅力_files/animate.min.css">
<link href="./魅力_files/css_whir.css" rel="stylesheet" type="text/css">

<script src="./魅力_files/jquery-1.9.1.min.js.下载" type="text/javascript"></script>
<script type="text/javascript" src="./魅力_files/wow.min.js.下载"></script>

<script type="text/javascript" src="./魅力_files/bootstrap.min.js.下载"></script>

<!--[if lt IE 9]>
    <script src="js/html5shiv.v3.72.min.js"></script>
    <script src="js/respond.min.js"></script>
<![endif]-->

<script type="text/javascript">
	var navID= "3";
</script>

</head>

<body huaban_collector_injected="true">
<!--Top Star-->
 
 
<header class="Toper">    
    <div class="Top">
    	<div class="LogoBox"><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/index.html"><img src="./魅力_files/logo.jpg"></a></div>
        <div class="RightBox">
        	<div class="BtnMainnav"><span class="glyphicon glyphicon-align-justify"></span></div>
            
                
            
                <div class="selectBox"></div>
                <div class="SreachBox">
                    <a href="javascript:void(0)" onclick="return GoSearchUrl();" class="sreach_btn"><em class="Texthide">搜索</em></a>
                    <input name="" type="text" class="sreach_ipu" id="key" value="关键字" onkeydown="entersearch()" onblur="if(this.value==&#39;&#39;)this.value=&#39;输入您的姓名&#39;;" onfocus="if(this.value==&#39;输入您的姓名&#39;)this.value=&#39;&#39;;">
                    <div class="clear"></div>
                </div>
                <nav class="MainNav1">
                    <ul>
                        <li id="nav1"><a class="navA" href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/index.html">首页<span>home</span></a></li>
                        <li id="nav2">
                            <a class="navA" href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/product.html"><b>产品系列</b><span>Products</span></a>
                            <div class="Submit">
                                <span class="JT"></span>
                                <dl>
                                    
                                        <dd><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/product.html#ProBox1">原态系列</a></dd>
                                    
                                        <dd><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/product.html#ProBox2">活菌系列</a></dd>
                                    
                                        <dd><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/product.html#ProBox3">鲜酪乳系列</a></dd>
                                    
                                        <dd><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/product.html#ProBox4">餐后一小时系列</a></dd>
                                    
                                    <div class="clear"></div>
                                </dl>
                            </div>
                        </li>
                        <li id="nav3" class="onnav">
                            <a class="navA" href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/kiss.html"><b>魅力</b><span>charm Classy·Kiss</span></a>
                            <div class="Submit" style="display: none;">
                                <span class="JT"></span>
                                <dl>
                                    
                                        <dd><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/kiss.html#KissBox1">100%供港生牛乳</a></dd>
                                    
                                        <dd><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/kiss.html#KissBox2">5种欧洲益生菌</a></dd>
                                    
                                        <dd><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/kiss.html#KissBox3">挑剔检控</a></dd>
                                    
                                </dl>
                            </div>
                        </li>
                        <li id="nav4">
                            <a class="navA" href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/food.html"><b>酸奶美食与健康</b><span>Food &amp; Health</span></a>
                            <div class="Submit" style="display: none;">
                                <span class="JT"></span>
                                <dl>
                                    <dd><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/list.html">酸奶美食</a></dd>
                                    <dd><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/tieshi.html">健康贴士</a></dd>
                                </dl>
                            </div>
                        </li>
                        <li id="nav5"><a class="navA" href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/pinpai.html"><b>品牌活动</b><span>Brand news</span></a></li>
                        <li id="nav6"><a class="navA" href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/huanjing.html"><b>环境保护</b><span>Environmental</span></a></li>
                        <div class="clear"></div>
                    </ul>
                </nav>
                <div class="clear"></div>
</div>
        <div class="clear"></div>
    </div>
    <div class="SubmitBox" style="display: none;"></div>
    <nav class="MainNav2">
      <ul>
         <li id="nav1"><a class="navA" href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/index.html">首页</a></li>
         <li id="nav2">
            <a class="navA" href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/product.html"><b>产品系列</b></a>
            <div class="Submit">
                <dl>
                    
                        <dd><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/product.html#ProBox1">原态系列</a></dd>
                    
                        <dd><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/product.html#ProBox2">活菌系列</a></dd>
                    
                        <dd><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/product.html#ProBox3">鲜酪乳系列</a></dd>
                    
                        <dd><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/product.html#ProBox4">餐后一小时系列</a></dd>
                    
                    <div class="clear"></div>
                </dl>
            </div>
         </li>
         <li id="nav3">
            <a class="navA" href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/kiss.html"><b>魅力</b></a>
            <div class="Submit">
                <dl>
                    
                        <dd><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/kiss.html#KissBox1">100%供港生牛乳</a></dd>
                    
                        <dd><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/kiss.html#KissBox2">5种欧洲益生菌</a></dd>
                    
                        <dd><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/kiss.html#KissBox3">挑剔检控</a></dd>
                    
                </dl>
            </div>
         </li>
         <li id="nav4">
            <a class="navA" href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/food.html"><b>酸奶美食与健康</b></a>
            <div class="Submit">
                <dl>
                    <dd><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/list.html">酸奶美食</a></dd>
                    <dd><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/tieshi.html">健康贴士</a></dd>
                </dl>
            </div>
         </li>
         <li id="nav5"><a class="navA" href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/pinpai.html"><b>品牌活动</b></a></li>
         <li id="nav6"><a class="navA" href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/huanjing.html"><b>环境保护</b></a></li>
         <div class="clear"></div>
      </ul>
    </nav>
</header>
<script type="text/javascript">
   //导航选中
    $("#nav" + navID).addClass("onnav");
	
	$(".MainNav1 li").each(function(i){
		$(this).hover(function(){

			if(i==0||i==4||i==5){
				$(".SubmitBox").hide();
			}
			else{
				$(".SubmitBox").show();
			}
			
			$(this).find(".Submit").show();	
		},function(){
			$(".SubmitBox").hide();
			$(this).find(".Submit").hide();	
		})	
	})
	$(".BtnMainnav").click(function(){
		if($(".MainNav2").css("display")=="none"){
			$(this).find("span").removeClass("glyphicon-align-justify").addClass("glyphicon-chevron-down");
			$(".MainNav2").show("slow");
		}	
		else{
			$(this).find("span").removeClass("glyphicon-chevron-down").addClass("glyphicon-align-justify");
			$(".MainNav2").hide("slow");
			}
	})
	
	$(".selectBox").click(function () {
	    $(".SreachBox").slideToggle();
	})
</script>

<script type="text/javascript">
//this function do not use jquery for honner page?
function GoSearchUrl() {
	var searchinput = document.getElementById("key");
	if (searchinput.value == "" || searchinput.value == "关键字") {
		alert("请输入关键字！");
		searchinput.focus();
		return false;
	}
	if (searchinput.value.length > 50) {
		alert("输入的关键字字数不要过多！");
		searchinput.focus();
		return false;
	}
	CheckString(searchinput.value);
}

function GoSreach(rs) {
    window.location = "/search.aspx?key=" + escape(rs);
	return true;
}

function entersearch(){
	 //alert(dd);
	var event = window.event || arguments.callee.caller.arguments[0];
	if (event.keyCode == 13)
	{
		GoSearchUrl();
	}
}

function CheckString(s) {
	var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）—|{}【】‘；：”“'。，、？]")
	var rs = "";
	for (var i = 0; i < s.length; i++) {
		rs = rs + s.substr(i, 1).replace(pattern, '');
	}
	if (rs == "") {
	    alert("不能输入特殊字符！");
	    $(".sreach_ipu").val("");
	    $(".sreach_ipu").focus();
		return false;
	}
	else{
		GoSreach(rs);
	}
}
</script>

<!--Top End-->

<!--Banner-->

    <div class="Banner"><img src="./魅力_files/ban_kiss.jpg"></div>



    <div class="BannerMoblie"><img src="./魅力_files/201606291614441444.jpg"></div>

<!--Banner--> 

<section class="KissCont">
	<div class="KissBox1" id="KissBox1">
        <div class="MainContent">
            <p class="title">100%供港生牛乳</p>
            <ul>
                
                    <li style="height: 404px; padding-top: 20.2px; padding-bottom: 32.32px; overflow: hidden;">
                        <figure><img src="./魅力_files/title_1.jpg"></figure>
                        <div class="textBox">
                            <b class="title">以高于国家标准的欧盟标准<br>甄选每一滴牛奶</b>
                            <div class="detail">拒绝任何廉价低质的牛奶原料，并建立高于国家标准的奶源采购标准，凡不符合标准的原料一律被拒之门外。<br>与广东省内大型牧场形成长期战略合作，共同致力于牧场基础设施的建设、牧场标准化生产水平的提高，实现奶源生产和乳制品加工产业的无缝对接。<br>不定期对牧场进行实地评估和各项指标检测，凡质量安全不达标的，将暂停整改或取缔第三方供应资格，实现从奶牛养殖和牧场源头控制乳制品生产风险。<br>
                                <div class="clear"></div>
                            </div>
                        </div>
                        <span class="BtnMore"></span>
                    </li>
                
                    <li style="height: 404px; padding-top: 20.2px; padding-bottom: 32.32px; overflow: hidden;">
                        <figure><img src="./魅力_files/title_2.jpg"></figure>
                        <div class="textBox">
                            <b class="title">“天然氧气库”上的牧场</b>
                            <div class="detail">合作伙伴之一温氏集团牧场位于肇庆鼎湖山、清远等自然生态区。其中鼎湖山位于东经112°31′，北纬23°10′，是北回归线上的唯一的绿洲，素有“北回归线上的绿宝石”之称，也因负离子含量高，被誉为“天然氧气库”<br>
                                <div class="clear"></div>
                            </div>
                        </div>
                        <span class="BtnMore"></span>
                    </li>
                
                    <li style="margin-right: 0px; height: 404px; padding-top: 20.2px; padding-bottom: 32.32px; overflow: hidden;">
                        <figure><img src="./魅力_files/title_3.jpg"></figure>
                        <div class="textBox">
                            <b class="title">优质奶牛品种与进口天然饲料</b>
                            <div class="detail">合作牧场奶牛品种为荷斯坦牛，是英国、荷兰、新西兰、澳大利亚等国家饲养的主要品种。牧场一般以进口紫花苜蓿、玉米、燕麦等纯天然饲料喂养奶牛。<br>进口紫花苜蓿含有高蛋白，其维他命K的含量远超过各类蔬菜，维他命C、B也相当丰富，能更好补充奶牛所需营养。
                                <div class="clear"></div>
                            </div>
                        </div>
                        <span class="BtnMore"></span>
                    </li>
                
                <div class="clear"></div>
            </ul>
        </div>
    </div>
	<div class="KissBox2" id="KissBox2">
        <div class="MainContent">
            <p class="title">5种欧洲益生菌</p>
            <ul>
                
                    <li style="height: 366px; padding-top: 18.3px; padding-bottom: 18.3px; overflow: hidden;">
                        <div class="textBox">
                            <b class="title">14000株庞大菌种库</b>
                            <div class="detail">与世界顶级乳酸菌开发企业丹麦科汉森强强联手、深度合作。科汉森是一家百年菌种研发和生产企业，旗下拥有超过14000株庞大菌种库，为酸奶的研发提供了强大的菌种储备资源。
                                <div class="clear"></div>
                            </div>
                        </div>
                        <span class="BtnMore"></span>
                        <figure><img src="./魅力_files/kissimg_1.jpg"></figure>
                    </li>
                   
                
                    <li style="height: 366px; padding-top: 18.3px; padding-bottom: 18.3px; overflow: hidden;">
                        <div class="textBox">
                            <b class="title">精选5种优质益生菌</b>
                            <div class="detail">多次远赴欧洲，从1000多株优质菌种中挑选5种最佳益生菌，其中包括酸奶发酵基础菌--保加利亚乳杆菌、嗜热链球菌以及健康三益菌--双歧杆菌、嗜酸酪乳杆菌、副干酪乳杆菌。益生菌能活着到达肠道并长时间在肠道中存活，促进人体消化吸收，增强人体免疫力，补充人体所需营养。
                                <div class="clear"></div>
                            </div>
                        </div>
                        <span class="BtnMore"></span>
                        <figure><img src="./魅力_files/kissimg_2.jpg"></figure>
                    </li>
                   
                
                    <li style="margin-right: 0px; height: 366px; padding-top: 18.3px; padding-bottom: 18.3px; overflow: hidden;">
                        <div class="textBox">
                            <b class="title">2000次否定只为1次完美匹配</b>
                            <div class="detail">真正优质的酸奶，并不在于菌种的多少，更不是菌种的简单添加，而是取决于菌种的匹配是否最优。一直以来信奉“最匹配、最合适的才是最好的”，将5种优质益生菌进行了2000多次的配比实验和口味测试，最终研发出黄金配方，成就了酸奶独一无二的口感与丰富营养。
                                <div class="clear"></div>
                            </div>
                        </div>
                        <span class="BtnMore"></span>
                        <figure><img src="./魅力_files/kissimg_3.jpg"></figure>
                    </li>
                   
                
                <div class="clear"></div>
           </ul>
        </div>
    </div>
    <div class="KissBox3" id="KissBox3">
        <div class="MainContent">
        	<div class="textBox">
            	<div class="text">
                	<p class="title">“HACCP+ISO9001”双质量体系挑剔检控</p>
                	<div class="detail">
                        
                            早在企业经营初期，已成为中国乳品企业中率先通过美国太空总署食品安全管理体系HACCP认证的企业，并建立以“HACCP+ISO9001”双质量认证体系内控标准，每一次的生产都需经过12道检验，20多个关键控制点，上百道安全审核程序，始终坚持“质量经营”战略严守产品质量关。
                            <div class="clear"></div>
                        
                    </div>
                </div>
            	
            </div>
        </div>
    </div>
    <div class="KissBox4" id="KissBox4">
        <div class="MainContent">
        	<div class="textBox">
            	<div class="text">
                	<p class="title">2-6℃全程冷链</p>
                	<div class="detail">
                        
                            为了保证每一杯酸奶的优质口感和最佳风味，摒弃了具有巨大风险的第三方物流，不惜斥巨资自建全程冷链系统，以实现各环节的2-6℃。从鲜奶刚被挤出，几分钟之内立刻降温到2-6℃；鲜奶运输至工厂途中保持2-6℃；奶车到工厂后，鲜奶被输送到储奶罐保持2-6℃；经过均质、杀菌、发酵等一系列加工后，即刻进入速冷隧道，使产品迅速降温，以保留产品最好的状态与口味，最后在2-6℃环境下包装并装车，产品运输途中是2-6℃（冷链车内装有GPS温度探测仪，实时监控运输过程中车厢的温度），直至送达消费者手中——一直是2-6℃。<p>	<br></p>
                            <div class="clear"></div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="KissBox5">
        <div class="MainContent">
        	<div class="ABox">
            	<a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/kiss.html#">查看产品</a>
            </div>
        </div>
    </div>
</section>

<script>
	if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
		new WOW().init();
	};
	
	$(".KissBox1 li:last").css("margin-right","0");
	function changheight(){
		var _height=0;
		var height=0;
		$(".KissBox1 li").each(function(){
			height=$(this).height();
			if(_height>height){
				_height=_height;	
			}	
			else{
					_height=height+60;	
			}
		})
		$(".KissBox1 li").height(_height);
		$(".KissBox1 li").css({"padding-top":_height*0.05+"px","padding-bottom":_height*0.08+"px","overflow":"hidden"})
	}
	$(document).ready(function() {		
		$(".KissBox1 li").each(function(){
			var text=$(this).find(".textBox .detail").text();
			//var subtext=text.substring(0,90)+"...";
			//$(this).find(".textBox .detail").text(subtext);
			
			$(this).find(".BtnMore").click(function(){
				if($(this).prevAll("figure").css("display")=="block"){
					$(this).prevAll("figure").slideUp();	
					//$(".KissBox1 .textBox .detail").css("padding-bottom","15px");
					//$(this).prev(".textBox").find(".detail").text(text);
					$(this).prev(".textBox").find(".detail").css({"height":"auto"})
					$(this).addClass("BtnMoreOn");
				}
				else{
					$(this).prevAll("figure").slideDown();	
					//$(".KissBox1 .textBox .detail").css("padding-bottom","30px");
					//$(this).prev(".textBox").find(".detail").text(subtext);
					$(this).prev(".textBox").find(".detail").css({"height":"9em"})
					$(this).removeClass("BtnMoreOn");
					}
			})
			
		})
		  changheight();
    });
	
	$(".KissBox2 li:last").css("margin-right","0");
	function changheight_2(){
		var _height=0;
		var height=0;
		$(".KissBox2 li").each(function(){
			height=$(this).height();
			if(_height>height){
				_height=_height;	
			}	
			else{
					_height=height;	
			}
		})
		$(".KissBox2 li").height(_height);
		$(".KissBox2 li").css({"padding-top":_height*0.05+"px","padding-bottom":_height*0.05+"px","overflow":"hidden"})
	}
	$(document).ready(function() {		
		$(".KissBox2 li").each(function(){
			var text=$(this).find(".textBox .detail").text();
			//var subtext=text.substring(0,30)+"...";
			//$(this).find(".textBox .detail").text(subtext);
			
			$(this).find(".BtnMore").click(function(){
			if ($(this).nextAll("figure").css("display") == "block") {
			    $(this).nextAll("figure").slideUp(500);	
					//$(".KissBox2 .textBox .detail").css("padding-top","15px");
					//$(this).prev(".textBox").find(".detail").text(text);
					$(this).prev(".textBox").find(".detail").css({"height":"auto"})
					$(this).addClass("BtnMoreOn");
				}
				else{
				    $(this).nextAll("figure").slideDown(500);	
					//$(".KissBox2 .textBox .detail").css("padding-top","30px");
					//$(this).prev(".textBox").find(".detail").text(subtext);
					$(this).prev(".textBox").find(".detail").css({"height":"3.6em"})
					$(this).removeClass("BtnMoreOn");
					}
				
			})
			
		})
		  changheight_2();
    });
	window.resize()=function(){
		changheight();
		changheight_2();
		}
		
	window.resize()=function(){
		changheight();
		}
	
</script>

<!--bottom Star-->
 
 
<footer class="Bottomer">

	<div class="Bottom">
	
		<div class="LinkList">
			<a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/kiss.html#"><img src="./魅力_files/ico_1.png"></a>
			<a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/kiss.html#"><img src="./魅力_files/ico_2.png"></a>
			<a href="javascript:void(0)" class="weixin">
				<img src="./魅力_files/ico_3.png">
				<div class="WeixinBox"><img src="./魅力_files/weixin.jpg"></div>
			</a>
		</div>
		
		<div class="title">—— 客服热线 ——</div>
	
		<div class="Phone">400-xxx-xxxxx</div>
	
		<nav class="BottomLinks">
			<a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/kiss.html#">关于我们</a> <em>|</em><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/kiss.html#">联系我们</a> <em>|</em><a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/kiss.html#">版权声明</a>
		</nav>
		<div class="Copyright">
			Copyright © 2016 生物有限公司  xxxxxx (SHENZHEN) CO., LTD<a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/kiss.html#" style="color:#999;">粤ICP备xxxxxx号</a><span>Designed by <a href="http://www.17sucai.com/preview/1324218/2018-07-31/ks/kiss.html#">Wanhu</a>.</span>
			<div style="width:300px;margin:0 auto; padding:20px 0;">
				<a target="#" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="./魅力_files/beian.png" style="float:left;">
				<p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">粤公网安备 xxxxxxxx号</p></a>
			</div>
			<div class="ReturnTop" style="display: none;"><a href="javascript:void(0);"></a></div>
		</div>
		
	</div>
	
</footer>
<script type="text/javascript">

    $(function () {

        //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 260) {
                    $(".ReturnTop").fadeIn(1500);
                }

                else {

                    $(".ReturnTop").fadeOut(1500);

                }
            });

            //当点击跳转链接后，回到页面顶部位置
            $(".ReturnTop").click(function () {
                $('body,html').animate({ scrollTop: 0 }, 1000);

                return false;

            });

        });

    });

</script>
<script type="text/javascript">

    $(".weixin").hover(function () {
        $(".WeixinBox").show();
    }, function () {
        $(".WeixinBox").hide();
    })
		
    //无图处理
    jQuery.each(jQuery("img"), function (i, n) { jQuery(n).error(function () { n.src = 'images/nopic.jpg'; }); n.src = n.src; });
</script>

<!--bottom End-->



<div id="HUABAN_WIDGETS"><div class="HUABAN-f-button" style="display: block; left: 5px; top: 95px;">采集</div><style>#HUABAN_WIDGETS  {font-family: "helvetica neue",arial,sans-serif; color: #444; font-size: 14px;} #HUABAN_WIDGETS * {box-sizing: content-box;} #HUABAN_WIDGETS .HUABAN-main {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #e5e5e5; background: rgba(229,229,229,.95); max-height: 100%; overflow: hidden; z-index: 9999999999999;} #HUABAN_WIDGETS a img {border: 0;} #HUABAN_WIDGETS .HUABAN-header {height: 50px; background: white; box-shadow: 0 0 4px rgba(0,0,0,.2); width: 100%; left: 0; top: 0; position: absolute;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-inner {margin: 0 auto; position: relative;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-close {width: 60px; height: 50px; border-left: 1px solid #ddd; position: absolute; right: 0; top: 0; background: url(https://huaban.com/img/widgets/btn_close.png) 20px 14px no-repeat; cursor: pointer;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-close:hover {background-position: 20px -26px;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-close:active {background-position: 20px -66px;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-logo {display: block; position: absolute; top: 12px;} #HUABAN_WIDGETS .HUABAN-waterfall-holder {position: relative; overflow-y: auto; height: 100%;} #HUABAN_WIDGETS .HUABAN-waterfall {position: relative; margin-top: 50px;} #HUABAN_WIDGETS .HUABAN-waterfall .HUABAN-empty {position: absolute; left: 50%; top: 30px; height: 36px; line-height: 36px; width: 216px; text-align: left; margin-left: -128px; color: #777; background: url(https://huaban.com/img/widgets/icon_notice.png) 12px 8px no-repeat white; padding-left: 40px; font-size: 15px;} #HUABAN_WIDGETS .HUABAN-btn {display: inline-block; border-radius: 2px; font-size: 14px; padding: 0 12px; height: 30px; line-height: 30px; cursor: pointer; text-decoration: none; white-space: nowrap; -moz-user-select: none; -webkit-user-select: none; user-select: none; text-align: center; background: #D53939; color: white;} #HUABAN_WIDGETS .HUABAN-btn:hover {background: #E54646;} #HUABAN_WIDGETS .HUABAN-btn:active {background: #C52424;} #HUABAN_WIDGETS .HUABAN-wbtn {background: #EDEDED; color: #444;} #HUABAN_WIDGETS .HUABAN-wbtn:hover {background: #F2F2F2;} #HUABAN_WIDGETS .HUABAN-wbtn:active {background: #DDD;} #HUABAN_WIDGETS .HUABAN-f-button {position: absolute; display: none; z-index: 9999999999998; box-shadow: 0 0 0 2px rgba(255,255,255,.2); background: #aaa; background: rgba(0,0,0,.3); color: white; cursor: pointer; padding: 0 12px; height: 30px; line-height: 30px; border-radius: 2px; font-size: 14px} #HUABAN_WIDGETS .HUABAN-f-button:hover {background-color: #999; background-color: rgba(0,0,0,.5);} #HUABAN_WIDGETS .HUABAN-f-button:active {background-color: rgba(0,0,0,.6);} #HUABAN_WIDGETS .HUABAN-red-normal-icon-button {width: 36px; height: 24px; border: 0px; line-height: 24px; padding-left: 24px; padding-right: 0px; text-align: left; background: url(https://huaban.com/img/widgets/widget_icons.png) 0 -200px no-repeat; box-shadow: none !important; font-size: 14px; background-color: transparent !important;} #HUABAN_WIDGETS .HUABAN-red-normal-icon-button:hover {background-position: -130px -200px;} #HUABAN_WIDGETS .HUABAN-red-normal-icon-button:active {background-position: -260px -200px;} #HUABAN_WIDGETS .HUABAN-red-large-icon-button {width: 80px; height: 24px; border: 0px; line-height: 24px; padding-left: 24px; padding-right: 0px; text-align: left; background: url(https://huaban.com/img/widgets/widget_icons.png) 0 -150px no-repeat; box-shadow: none !important; font-size: 14px; background-color: transparent !important;} #HUABAN_WIDGETS .HUABAN-red-large-icon-button:hover {background-position: -130px -150px;} #HUABAN_WIDGETS .HUABAN-red-large-icon-button:active {background-position: -260px -150px;} #HUABAN_WIDGETS .HUABAN-red-small-icon-button {width: 30px; height: 21px; border: 0px; line-height: 21px; padding-left: 20px; padding-right: 0px; text-align: left; background: url(https://huaban.com/img/widgets/widget_icons.png) 0 -250px no-repeat; box-shadow: none !important; font-size: 12px; background-color: transparent !important;} #HUABAN_WIDGETS .HUABAN-red-small-icon-button:hover {background-position: -130px -250px;} #HUABAN_WIDGETS .HUABAN-red-small-icon-button:active {background-position: -260px -250px;} #HUABAN_WIDGETS .HUABAN-white-normal-icon-button {width: 36px; height: 24px; border: 0px; line-height: 24px; padding-left: 24px; padding-right: 0px; text-align: left; background: url(https://huaban.com/img/widgets/widget_icons.png) 0 -500px no-repeat; box-shadow: none !important; color: #444; font-size: 14px; background-color: transparent !important;} #HUABAN_WIDGETS .HUABAN-white-normal-icon-button:hover {background-position: -130px -500px;} #HUABAN_WIDGETS .HUABAN-white-normal-icon-button:active {background-position: -260px -500px;} #HUABAN_WIDGETS .HUABAN-white-large-icon-button {width: 80px; height: 24px; border: 0px; line-height: 24px; padding-left: 24px; padding-right: 0px; text-align: left; background: url(https://huaban.com/img/widgets/widget_icons.png) 0 -450px no-repeat; box-shadow: none !important; color: #444; font-size: 14px; background-color: transparent !important;} #HUABAN_WIDGETS .HUABAN-white-large-icon-button:hover {background-position: -130px -450px;} #HUABAN_WIDGETS .HUABAN-white-large-icon-button:active {background-position: -260px -450px;} #HUABAN_WIDGETS .HUABAN-white-small-icon-button {width: 30px; height: 21px; border: 0px; line-height: 21px; padding-left: 20px; padding-right: 0px; text-align: left; background: url(https://huaban.com/img/widgets/widget_icons.png) 0 -550px no-repeat; box-shadow: none !important; color: #444; font-size: 12px; background-color: transparent !important;} #HUABAN_WIDGETS .HUABAN-white-small-icon-button:hover {background-position: -130px -550px;} #HUABAN_WIDGETS .HUABAN-white-small-icon-button:active {background-position: -260px -550px;} #HUABAN_WIDGETS .HUABAN-cell {width: 236px; position: absolute; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .3s ease-in-out, top .3s linear;} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-img-holder {overflow: hidden; position: relative;} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-img-holder:hover img.HUABAN-cell-img {opacity: .8} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-video-icon {width: 72px; height: 62px; position: absolute; left: 50%; top: 50%; margin: -31px auto auto -36px; background: url(https://huaban.com/img/widgets/media_video.png) 0 0 no-repeat; display: none;} #HUABAN_WIDGETS .HUABAN-cell.HUABAN-video .HUABAN-video-icon {display: block;} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-over {display: none;} #HUABAN_WIDGETS .HUABAN-cell:hover .HUABAN-over {display: block;} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-over .HUABAN-btn {width: 60px; height: 34px; padding: 0; position: absolute; left: 50%; top: 50%; margin: -18px 0 0 -31px; line-height: 34px; box-shadow: 0 0 0 2px rgba(255,255,255,.2); font-size: 16px;} #HUABAN_WIDGETS .HUABAN-cell.HUABAN-long .HUABAN-img-holder {height: 600px;} #HUABAN_WIDGETS .HUABAN-cell.HUABAN-long .HUABAN-img-holder:after {content: ""; display: block; position: absolute; width: 236px; height: 12px; left: 0; bottom: 0; background: url(https://huaban.com/img/widgets/long_image_shadow_2.png) repeat-x 4px top;} #HUABAN_WIDGETS .HUABAN-cell img {width: 236px; display: block;} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-size {margin: 8px 16px; font-size: 12px; color: #999} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-description {display: block; width: 202px; margin: 0 6px 6px; padding: 6px 10px; border: 0; resize: none; outline: 0; border: 1px solid transparent; line-height: 18px; font-size: 13px; overflow: hidden; word-wrap: break-word; background: url(https://huaban.com/img/widgets/icon_edit.png) 500px center no-repeat;} #HUABAN_WIDGETS .HUABAN-cell:hover .HUABAN-description {background-color: #fff9e0; background-position: right top;} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-description:focus {background-color: #F9F9F9; background-position: 500px center;} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-select-btn {width: 34px; height:34px; background: url(https://huaban.com/img/widgets/checkbox.png) 0 0 no-repeat; position: absolute; right: 5px; top: 5px; cursor: pointer;} #HUABAN_WIDGETS .HUABAN-cell .HUABAN-pinned-label {position: absolute; left: 0; top: 10px; height: 24px; line-height: 24px; padding: 0 10px; background: #CE0000; background: rgba(200, 0, 0, 0.9); color: white; font-size: 12px; display: none;} #HUABAN_WIDGETS .HUABAN-cell.HUABAN-pinned .HUABAN-pinned-label {display: block;} #HUABAN_WIDGETS .HUABAN-selected .HUABAN-select-btn {background-position: 0 -40px;} #HUABAN_WIDGETS .HUABAN-multi .HUABAN-cell .HUABAN-img-holder {cursor: pointer;} #HUABAN_WIDGETS .HUABAN-multi .HUABAN-cell .HUABAN-cell-pin-btn {display: none;} #HUABAN_WIDGETS .HUABAN-multi .HUABAN-cell .HUABAN-over {display: block;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-multi-buttons {position: absolute; top: 10px; left: 0; display: none;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-multi-buttons .HUABAN-btn {margin-right: 10px;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-multi-noti {display: none; height: 50px; line-height: 50px; text-align: center; font-size: 16px; color: #999; font-weight: bold;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-multi-noti span {font-weight: normal;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-multi-noti i {font-style: normal;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-notice {padding: 0 10px; height:30px; line-height: 30px; position: absolute; left: 50%; top: 10px; margin-left: -83px; background: #fff9e2; text-align: center;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-notice i {display: inline-block; width: 18px; height: 18px; background: url(https://huaban.com/img/widgets/icon_notice.png) 0 0 no-repeat; vertical-align: top; margin: 6px 6px 0 0;} #HUABAN_WIDGETS .HUABAN-switcher {height: 50px; width: 100px; position: relative;} #HUABAN_WIDGETS .HUABAN-switcher .HUABAN-title {position: absolute; right: 75px; top: 13px; color: #999; white-space: nowrap; line-height: 24px; opacity: 0; visibility: hidden;} #HUABAN_WIDGETS .HUABAN-switcher:hover .HUABAN-title {visibility: visible; opacity: 1; -webkit-transition: opacity .2s linear; -webkit-transition-delay: .2s; transition: opacity .2s linear; transition-delay: .2s;} #HUABAN_WIDGETS .HUABAN-switcher .HUABAN-bar {width: 40px; height: 24px; background: #EB595F; border-radius: 12px; color: white; position: absolute; right: 0; top: 13px; cursor: pointer; font-size: 14px; -webkit-transition: all .2s linear; transition: all .2s linear;} #HUABAN_WIDGETS .HUABAN-switcher:hover .HUABAN-bar {width: 64px;} #HUABAN_WIDGETS .HUABAN-switcher.HUABAN-on .HUABAN-bar {background: #7DD100;} #HUABAN_WIDGETS .HUABAN-switcher .HUABAN-bar .HUABAN-round {width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; left: 2px; top: 2px; -webkit-transition: left .2s linear; box-shadow: 0px 0px 3px rgba(0,0,0,0.15); transition: left .2s linear; box-shadow: 0px 0px 3px rgba(0,0,0,0.15);} #HUABAN_WIDGETS .HUABAN-switcher.HUABAN-on .HUABAN-bar .HUABAN-round {left: 17px;} #HUABAN_WIDGETS .HUABAN-switcher.HUABAN-on:hover .HUABAN-bar .HUABAN-round {left: 41px;} #HUABAN_WIDGETS .HUABAN-switcher .HUABAN-bar .HUABAN-text-1 {height: 24px; line-height: 24px; position: absolute; right:17px; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all .2s linear; transition: all .2s linear;} #HUABAN_WIDGETS .HUABAN-switcher:hover .HUABAN-bar .HUABAN-text-1 {right: 9px; opacity: 1; visibility: visible;} #HUABAN_WIDGETS .HUABAN-switcher.HUABAN-on:hover .HUABAN-bar .HUABAN-text-1 {right: 17px; opacity: 0; visibility: hidden;} #HUABAN_WIDGETS .HUABAN-switcher .HUABAN-bar .HUABAN-text-2 {height: 24px; line-height: 24px; position: absolute; left:17px; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all .2s linear; transition: all .2s linear;} #HUABAN_WIDGETS .HUABAN-switcher:hover .HUABAN-bar .HUABAN-text-2 {left: 17px; opacity: 0; visibility: hidden;} #HUABAN_WIDGETS .HUABAN-switcher.HUABAN-on:hover .HUABAN-bar .HUABAN-text-2 {left: 9px; opacity: 1; visibility: visible;} #HUABAN_WIDGETS .HUABAN-header .HUABAN-switcher {position: absolute; right: 0; top: 0;} <!--[if IE 6]>#HUABAN_WIDGETS .HUABAN-red-normal-icon-button, .HUABAN-red-large-icon-button, .HUABAN-red-small-icon-button, .HUABAN-white-normal-icon-button, .HUABAN-white-large-icon-button, .HUABAN-white-small-icon-button { background-image: url({{imgBase}}/widget_icons_ie6.png) <![endif]--></style></div></body></html>